<template>
  <div class="about">
    <div class="container">
      <div class="plants">
        <el-image class="egg" :src="psrc"></el-image>
      </div>
      <div class="notice-card-wrapper">
        <!-- 系统公告 -->
        <div class="message">
          <h1>关于我们 Mr.X's Team</h1>
          <h1>以下排名不分先后 (随机排序)</h1>
          <template v-for="member in members">
            <div class="inner-container">
              <el-avatar :src="member.pic"></el-avatar>
              <el-link :href="member.mail">{{member.name}}</el-link>
            </div>
          </template>
        </div>
      </div>
      <div class="zombies">
        <el-image class="egg" :src="zsrc"></el-image>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ComputedRef } from 'vue';
import { IPlants, ITeamMember, IZombies } from '../api/x-type';
import { getAssetsImageFile } from '../utils/asset-utils'
import { listPlants, listZombies } from '../api/x-about';

const psrc = ref('')
const zsrc = ref('')
var currPid = 0
var currZid = 0
var plantsSrc: IPlants[] = []
var zombiesSrc: IZombies[] = []


const members: ComputedRef<ITeamMember[]> = computed((): ITeamMember[] => {
  return [
    {
      name: '肖康宁',
      pic: 'xkn.jpg',
      mail: '1725338233@qq.com'
    },
    {
      name: '孙良钊',
      pic: 'slz.jpg',
      mail: 'slz2314028487@qq.com'
    },
    {
      name: '万晨',
      pic: 'vc.jpg',
      mail: '1978375959@qq.com'
    },
    {
      name: '陶仁杰',
      pic: 'trj.jpg',
      mail: '2645162445@qq.com'
    },
    {
      name: '许昊',
      pic: 'xh.jpg',
      mail: '3057359369@qq.com'
    },
  ].map((it: ITeamMember): ITeamMember => {
    return {
      name: it.name,
      pic: getAssetsImageFile(it.pic),
      mail: `mailto:${it.mail}`
    }
  }).sort(() => Math.random() - 0.5)
})

onMounted(() => {
  listPlants().then(data => {
    plantsSrc = data.data
    setInterval(() => {
      psrc.value = plantsSrc[currPid++ % plantsSrc.length].img
    }, 2000);
  })
  listZombies().then(data => {
    zombiesSrc = data.data
    setInterval(() => {
      zsrc.value = zombiesSrc[currZid++ % zombiesSrc.length].img
    }, 2000);
  })

})

</script>

<style lang="scss" scoped>
.notice-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  width: 60%;
  height: 30%;

  .message {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .inner-container {
    display: flex;
    //margin-bottom: 20%; // 把文字弄出可见区域
    width: 180px;
    height: 60px;
    align-items: center;
  }

  /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateY(500px);
    }

    100% {
      transform: translateY(0px);
    }
  }
}

::-webkit-scrollbar {
  display: none;
}

.about {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: url('@/assets/images/about_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: myMove 8s linear; // 重点，定义动画
  animation-fill-mode: forwards;
}

h1 {
  color: white;
  font-size: 2rem;
}

.el-link {
  color: white;
  padding-left: 20px;
  font-size: 30px;
}

.egg {
  width: 96px;
  height: 96px;
  border-radius: 20%;
}
</style>